html,body,#root{
    width:100%;
    height:2000px;
    margin:0;
    padding:0;
    position: relative;
}
.topicsBox{
    width:100%;

.topics-box{
    margin:0 auto;
    width:100%;
    max-width:960px;
    height:1590px;
    .title{
        color: #0e0e0e;
        font-weight: 600;
        width:920px;
        font-size:25px;
        height: 30px;
        padding:90px 20px 45px 20px;
    }
    .topics{
        max-width: 920px;
        padding: 0 12px;
        width:910px;
        height:1000px;
    }
    .topConter{
        width:220px;
        height:73px;
        margin:20px 14px;
        float: left;
        .topImg{
            float: left;
            img{
                width:72px;
                height:72px;
                border-radius: 14px;
            }
        }
        .topTitle{
            float: right;
            width:130px;
            height:72px;
            
            a:nth-of-type(1){
                font-size:17px;
                width: 110px;
                display: inline-block;
                font-weight: 600;
                color:#000;
                text-decoration : none;
                line-height:26px;
                &:hover{
                    color:#007fff;
                }
            }
            span{
                font-size:13px;
                line-height:20px;
                color:#8a9aa9;
            }
            a:nth-of-type(2){
                text-decoration : none ;
                font-size:14px;
                color:#37c701;
            }
        }
    }
}

}
.topicBox{

    width:100%;
    height:100%;
    background-color: #f4f5f5;
    .topic-box{
        margin-left:12%;
        width:100%;
        max-width:960px;
        float: left;
        height:auto;
        position: relative;
    
    .topicTop{
        width:640px;
        height:42px;
        background: #fff;
        float: left; 
        margin-top:10px;
        ul{
            width:640px;
            height:42px;
            display: flex;
            align-items: center;
            justify-content: center;
            li{
                width: 25%;
                height:42px;
                font-size: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                cursor: pointer;
                a{
                    display: block;
                    width:38px;
                    height: 24px;
                    // line-height: 22px;
                    text-align: center;
                    text-decoration: none;
                    cursor: pointer;
                    margin: initial;
                    color: #909090;
                }
                
            }
            .active {
                color:#007fff;
                border-bottom:3px solid #007fff;
            }
        }
    }
    .topicConter{
       margin-top:10px;
        width:640px;
        height:auto;
        float: left;
        .topicCentent{
            width:640px;
            height:auto;
            border-radius: 2px;
            background: #fff;
            margin-bottom:10px;
            // background:#f00;
            .header{
                width:640px;
                height:64px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 16px 20px 0 20px;
               
                .left{
                    position: relative;
                    width:435px;
                    height:48px;
                    .left-Img{
                        width:45px;
                        height:45px;
                        background: #000;
                        border-radius: 50%;
                        float: left;
                        img{
                            width:45px;
                            height:45px;
                            border-radius: 50%;
                        }
                    }
                    
                    .left-Title{
                        width: 320px;
                        height:20px;
                        line-height: 24px;
                        font-weight: 600;
                        margin-left:12px;
                        float: left;
                        color:rgb(26, 26, 26);
                        font-size:18px;
                    }
                    .left-xinxi{
                        margin-left:12px;
                        float: left;
                        line-height: 29px;
                        height:20px;
                        color: #8a9aa9;
                    }
                    .topicInfo{
                        width:267px;
                        height:158px;
                        background: #fff;
                        border:1px solid #ccc;
                        position: absolute;
                        top :55px;
                        left:-120px;
                        z-index: 1;
                        display: none;
                        .Info-header{
                            width:265px;
                            height:70px;
                            margin-top:12px;
                            .Info-left{
                                width:63px;
                                height:63px;
                                border-radius: 50%;
                                float: left;
                                background: #000;
                                margin: 3px 0 0 20px;
                                img{
                                    width:63px;
                                    height:63px;
                                    border-radius: 50%;
                                }
                            }
                            .Info-right{
                                width:170px;
                                height:70px;
                                float: right;
                                span{
                                    width:150px;
                                    height:25px;
                                    display: block;
                                    font-size:13px;
                                    line-height:25px;
                                    // text-align: center;
                                    margin:6px 0;
                                    color:#0e0e0e;
                                }
                                em{
                                    width:150px;
                                    height:25px;
                                    display: block;
                                    overflow: hidden;
                                    text-overflow:ellipsis;
                                    white-space:nowrap;
                                    margin-top:8px;
                                }
                            }
                        }
                        .Info-footer{
                            width:266px;
                            height:74px;
                            .Info-one{
                                width:50px;
                                height:45px;
                                float: left;
                                margin:15px 25px 0 5px;
                                text-align: center;
                                b{
                                    width:50px;
                                    font-size: 16px;
                                    display: inline-block;
                                }
                                i{
                                    height:22px;
                                    font-size: 12px;
                                    line-height: 20px;
                                    color:#8a9aa9;
                                }
                            }
                            .Info-two{
                                width:50px;
                                height:45px;
                                float: left;
                                margin:15px 45px 0 0;
                                text-align: center;
                                b{
                                    width:50px;
                                    font-size: 16px;
                                    display: inline-block;
                                }
                                i{
                                    height:22px;
                                    font-size: 12px;
                                    line-height: 20px;
                                    color:#8a9aa9;
                                }
                            }
                            .Info-there{
                                width:55px;
                                height:26px;
                                text-align: center;
                                line-height: 26px;
                                border-radius: 2px;
                                display:block;
                                border:1px solid #37c701;
                                margin:30px 0 0 10px;
                                float: left;
                                a{
                                    color:#37c701;
                                    font-size:12px;
                                }
                            
                            }
                        }
                    }
                    &:hover{
                    .topicInfo{
                        display: block;
                    }
                }
                }
                
                .right{
                    width:55px;
                    height:26px;
                    text-align: center;
                    line-height: 26px;
                    border-radius: 2px;
                    display:block;
                    border:1px solid #37c701;
                    a{
                        color:#37c701;
                        font-size:12px;
                    }
                }
            }
            .content{
                width:507px;
                height:auto;
                font-size: 15px;
                line-height: 24px;
                position: relative;
                margin: 7px 20px 7px 77px;
                white-space: pre-wrap;
                color: #17181a;
            
            }
            .images{
                width:514px;
                height:114px;
                position: relative;
                margin: 4px 20px 0 77px;
                img{
                    width:110px;
                    height:110px;
                    margin:4px 4px 0 0;
                }
            }
            p{
                height:24px;
                position: relative;
                margin: 10px 20px 0 77px;
                a{
                    font-size: 13px;
                    display: inline-block;
                    line-height: 22px;
                    padding: 0 12px;
                    border: 1px solid #007fff;
                    border-radius: 14px;
                    color: #007fff;
                    user-select: none;
                }
            }
            .footer{
                width:640px;
                height:28px;
                display: flex;
                position: relative;
                margin-top:12px;
                border-top: 1px solid #ebebeb;
                span{
                    display: block;
                    width:215px;
                    height:auto;
                    margin:5px 0;
                    border-right:1px solid #ebebeb;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    b{
                        display: block;
                        width:18px;
                        height:18px;
                        img{
                            width:16px;
                            height:16px;
                        }
                    }
                    em{
                        display: block;
                        margin:3px 0 0 3px;
                        font-size: 13px;
                        font-weight: 500;
                        color: #8a93a0;
                    }
                }
            }
            
        }
    }
    .topicRight{
        width:300px;
        height:674px;
        float: right;
        position: absolute;
        top:62px;
        right:0;
        margin-top:-247px;
        .topic-top{
            width:300px;
            height:359px;
            margin-bottom:10px;
            background:#fff;
            .right-Top{
                position: relative;
                height: 109px;
                overflow: hidden;
                img{
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    background-position: 50%;
                    background-size: 140%;
                    background-repeat: no-repeat;
                    filter: blur(6.3px);
                    transform: scale(1.3);
                }
            }
            .right-content{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;

                .right-Img{
                    width:60px;
                    height:60px;
                    filter: none;
                    position: absolute;
                    top:-29px;
                    left: 50%;
                    border-radius: 5px;
                    margin-left: -32px;
                    border: 2px solid hsla(0,0%,100%,.6);
                    z-index: 1;
                    box-sizing: content-box;
                    img{
                        width: 100%;
                        height: 100%;
                        display: inline-block;
                        background-repeat: no-repeat;
                        background-size: cover;
                        
                    }
                }
                b{
                    font-size: 15px;
                    margin-top: 41px;
                    text-align: center;
                    // font-weight: 600;
                    color: #17181a;
                }
                button{
                    padding: 0;
                    width:78px;
                    height:30px;
                    line-height:30px;
                    text-align: center;
                    background: #fff;
                    border-radius: 3px;
                    color: #37c701;
                    border: 1px solid #37c701;
                    font-size: 15px;
                    margin: 10px 0 8px;
                }
                h5{
                    color: #17181a;
                    font-weight: 600;
                    font-size: 14px;
                    padding: 0 16px;
                    width:300px;
                }
                span{
                    width:300px;
                    padding: 0 16px;
                    white-space: pre-line;
                    display: inline-block;
                    font-size: 13px;
                    color: #1a1b1d;
                    width: 100%;
                    margin-bottom: 12px
                }
            }
            .right-item{
                flex: 1 1 auto;
                display: flex;
                margin: 0;
                list-style: none;
                text-align: center;
                padding: 12px 0;
                border-top: 1px solid rgba(92,96,102,.1);
                user-select: none;
                li{
                    flex: 1 1 auto;
                    max-height: 2.833rem;
                    &:nth-of-type(1){
                        border-right:1px solid rgba(92,96,102,.1);
                    }
                }
                b{
                    font-size: 19px;
                    font-weight: 600;
                    color: #2e3135;
                    line-height: .84;
                    display: block;
                }
                span{
                    padding-top: 6px;
                    font-size: 13px;
                    color: #8a9aa9;
                }
            }
        }
        .topic-footer{
            width:300px;
            height:341px;
            background:#fff;
            .footer-title{
                display: flex;
                justify-content: space-between;
                padding: 0 20px;
                line-height: 44px;
                widows: 300px;
                height:45px;
                border-bottom: 1px solid hsla(0,0%,59.2%,.1);
                span{
                    font-weight: 600;
                    font-size: 15px;
                    width:112px;
                    display: block;
                    line-height: 44px;
                    height: 44px;
                }
                a{
                    font-size: 13px;
                    color: #007fff;
                    cursor: pointer;
                    font-weight: 600;
                }
            }
            .footerImg{
                width:300px;
                height:296px;
                padding: 8px 0 4px;
                
                display: flex;
                ul{
                    li{
                        width:75px;
                        height:71px;
                        display: block;
                        margin:8px 0;
                        float: left;
                        a{
                            display: block;
                            width: 46px;
                            height:49px;
                            margin: 0 auto;
                            img{
                                width: 46px;
                                height:46px;
                                border-radius: 50%;
                            }
                            span{
                                color:#333;
                                margin-left:3px;
                                font-size:12px;
                                line-height:22px;
                            }
                        }
                    }
                    
                }
            }
        }
    }
}
}

